/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/

import QtQuick 6.2
import QtQuick.Controls 6.2
//import QtQuick.Controls.Styles 1.4
import QtQuick.Timeline 1.0
import QtQuick.Controls.Material 2.15
//import QtQuick.Controls.Universal 2.15
//import TransObj 1.0

Item {
    id: item1
    width: 1440
    height: 960
    antialiasing: false
    Image {
        id: image
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        horizontalAlignment: Image.AlignHCenter
        verticalAlignment: Image.AlignVCenter
        source: "qrc:/assets/backgrounds_195_610.jpg"
        sourceSize.width: 1920
        asynchronous: false
        anchors.topMargin: 0
        clip: false
        scale: 1
        fillMode: Image.Stretch
        Flipableitem{
            id: flipable
            x: 566
            width: 300
            height: 200
            opacity: 1
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.leftMargin: 0
            anchors.topMargin: 0
            Text {
                id: text1
                width: 200
                height: 107
                color: "#ffffff"
                text: qsTr("FAST  ")
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 80
                anchors.horizontalCenter: parent.horizontalCenter
            }
            BusyIndicator_diy{
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }

        Timer{
            interval: 2500
            repeat: false
            running: true
            onTriggered: {
                task_brake.start();
                task_brake.setFlag(1);
            }
        }

        Item{
            id:item_rpm
            width: 421
            height: 426
            z:1
            visible: true
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 60
            anchors.leftMargin: 60

            Canvas{
                id:canvas_rpm
                width: 421
                height: 426
                z:1
                visible: true
                anchors.fill:parent
                property real rx: 0
                onPaint:{
                    var ctx = getContext("2d")
                    ctx.clearRect(0,0,canvas_brake.width,canvas_brake.height)
                    ctx.beginPath()
                    var gradient = ctx.createLinearGradient(0,426,0,0);
                    gradient.addColorStop(0,"#68ff7a");
                    gradient.addColorStop(0.4,"#fffb00");
                    gradient.addColorStop(0.8,"#ff002a");
                    ctx.strokeStyle = gradient
                    ctx.lineWidth = 40;
                    ctx.arc(canvas_rpm.width/2,canvas_rpm.height/2,180,Math.PI/4,Math.PI/4 + rx)
                    ctx.stroke()
                }
                onRxChanged: {
                    requestPaint();
                }
                //                Behavior on rx {
                //                    NumberAnimation {
                //                        duration: 200
                //                    }
                //                }
                Item {
                    id: item2
                    width: 200
                    height: 200
                    //                    rotation: 0
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    transformOrigin: Item.Center
                    z: 0
                    Image {
                        id: rpm_needle_195_65
                        x: 156
                        y: 168
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                        source: "qrc:/assets/rpm_needle_195_65.png"
                        anchors.rightMargin: -34
                        anchors.bottomMargin: -24
                        transformOrigin: Item.Center
                        rotation: -160
                        fillMode: Image.PreserveAspectFit
                    }
                    //                    Behavior on rotation {
                    //                        NumberAnimation {
                    //                            duration: 200
                    //                        }
                    //                    }
                }
            }
            Canvas{
                id:canvas_rpm_back
                width: 421
                height: 426
                z:0
                visible: true
                anchors.fill:parent
                onPaint:{
                    var ctx = getContext("2d")
                    ctx.strokeStyle = "#e91e63"
                    ctx.lineWidth = 45;
                    ctx.arc(canvas_rpm.width/2,canvas_rpm.height/2,180,Math.PI / 4 - 0.01,Math.PI/4 + 3.7799)
                    ctx.stroke()
                }
            }

            Label {
                id: label
                x: 159
                y: 192
                width: 103
                height: 42
                color: "#c1c1c1"
                text: (axis_rx * 100).toFixed(2) + "%"
                property real textNumber: 0
                anchors.verticalCenter: item_rpm.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 25
                anchors.horizontalCenter: item_rpm.horizontalCenter
                onTextNumberChanged: {
                    label.text = label.textNumber.toFixed(2);
                }

            }
        }
        Item{
            id:item_brake
            width: 421
            height: 426
            z:1
            visible: true
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 60
            anchors.rightMargin: 60

            Canvas{
                id:canvas_brake
                x:478
                z:1
                width: 421
                height: 426
                anchors.fill:parent
                property real ry: 0
                property int draw_start: 1
                onPaint:{
                    var ctx = getContext("2d")
                    ctx.clearRect(0,0,canvas_brake.width,canvas_brake.height)
                    if(draw_start){
                        ctx.translate(421, 0);
                        ctx.scale(-1, 1);
                        draw_start = 0;
                    }
                    ctx.beginPath()
                    var gradient = ctx.createLinearGradient(0,426,0,0);
                    gradient.addColorStop(0,"#68ff7a");
                    gradient.addColorStop(0.4,"#fffb00");
                    gradient.addColorStop(0.8,"#ff002a");
                    ctx.strokeStyle = gradient//Qt.rgba(255,0,0,0.8)
                    ctx.lineWidth = 40;
                    ctx.arc(canvas_rpm.width/2,canvas_rpm.height/2,180,Math.PI / 4,Math.PI/4 + ry)
                    ctx.stroke()
                    //                ctx.restore()
                }
                //                Behavior on ry{
                //                    NumberAnimation {
                //                        duration: 500
                //                    }
                //                }
                onRyChanged: {
                    requestPaint();
                }
                //                Behavior on ry {
                //                    NumberAnimation {
                //                        duration: 200
                //                    }
                //                }
                Item {
                    id: item3
                    width: 200
                    height: 200
                    //                    rotation: -216 * axis_ry + 2
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter

                    activeFocusOnTab: false
                    Image {
                        id: rpm_needle_195_66
                        y: 267
                        anchors.left: parent.left
                        anchors.bottom: parent.bottom
                        source: "qrc:/assets/rpm_needle_195_65.png"
                        anchors.bottomMargin: -24
                        anchors.leftMargin: -34
                        transformOrigin: Item.Center
                        rotation: -80
                        fillMode: Image.PreserveAspectFit
                    }
                    //                    Behavior on rotation {
                    //                        NumberAnimation {
                    //                            duration: 200
                    //                        }
                    //                    }
                }
            }
            Canvas{
                id:canvas_brake_back
                x:478
                z:0
                width: 421
                height: 426
                anchors.fill: parent
                onPaint:{
                    var ctx = getContext("2d")
                    ctx.translate(421, 0);
                    ctx.scale(-1, 1);
                    ctx.strokeStyle = "#e91e63"
                    ctx.lineWidth = 45;
                    ctx.arc(canvas_rpm.width/2,canvas_rpm.height/2,180,Math.PI / 4 - 0.01,Math.PI/4 + 3.7799)
                    ctx.stroke()
                }
            }

            Label {
                id: label1
                width: 103
                height: 42
                color: "#c1c1c1"
                text: (axis_ry * 100).toFixed(2) + "%"
                property real textNumber: 0
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 25
                anchors.horizontalCenter: parent.horizontalCenter
                onTextNumberChanged: {
                    label1.text = label1.textNumber.toFixed(2);
                }
            }
        }
        BusyIndicator {
            id: busyIndicator
            x: 259
            y: 40
            width: 98
            height: 95
            visible: false
        }

        RoundButton {
            id: startButton
            width: 120
            radius: 34
            text: "连接"
            anchors.top: item_whell.bottom
            anchors.bottom: item_rpm.top
            z: 1
            anchors.bottomMargin: -150
            anchors.topMargin: 55
            anchors.horizontalCenterOffset: -100
            anchors.horizontalCenter: parent.horizontalCenter
            checked: false
            checkable: false
            highlighted: false
            flat: false
            state: "DISABLE"
            Behavior on state {
                NumberAnimation {
                    duration: 300
                }
            }
            background: Rectangle {
                height: parent.height - 10
                width: parent.width - 13;
                color: parent.hovered ? parent.down ? "#10ff10" : parent.checked ? "#20ff20" : hovered_b : parent.checked ? "#10ff10" :back_b
                radius: 15
                Behavior on color{
                    ColorAnimation {
                        duration: 200
                    }
                }
            }
            onClicked: {
                if(startButton.checked !== true){
                    task_brake.setFlag(1);
                    task_brake.start();
                    loop_usb_connect.repeat = true;
                }
            }
            states: [
                State {
                    name: "ENABLE"
                    PropertyChanges {
                        target: startButton
                        text: "已连接"
                        checked: true
                    }
                },
                State {
                    name: "DISABLE"
                    PropertyChanges {
                        target: startButton
                        text: "连接"
                        checked: false
                    }
                }
            ]
            //            transitions: [
            //                Transition {
            //                    from: "ENABLE"
            //                    to: "DISABLE"
            //                    ColorAnimation {
            //                        target: object
            //                        duration: 500
            //                    }
            //                },
            //                Transition {
            //                    from: "DISABLE"
            //                    to: "ENABLE"
            //                    ColorAnimation {
            //                        target: object
            //                        duration: 500
            //                    }
            //                }
            //            ]

        }
        Timer{
            id:stop_filed
            interval: 500
            repeat: false
            running: false
            onTriggered: {
                if(startButton.state == "ENABLE"){
                    task_brake.terminate()
                }
            }
        }
        RoundButton {
            id: roundButton1
            z:2
            width: 120
            radius: 50
            text: "断开"
            anchors.top: item_whell.bottom
            anchors.bottom: item_rpm.top
            anchors.bottomMargin: -150
            anchors.topMargin: 55
            anchors.horizontalCenterOffset: 100
            anchors.horizontalCenter: parent.horizontalCenter
            checked: false
            checkable: false
            highlighted: false
            flat: false
            background: Rectangle {
                height: parent.height - 10
                width: parent.width - 13;
                color: parent.hovered ? parent.down ? "#ff1010" : hovered_b : back_b
                radius: 15
                Behavior on color{
                    ColorAnimation {
                        duration: 200
                    }
                }
            }
            onClicked: {
                task_brake.setFlag(0);
                stop_filed.start();
                loop_usb_connect.stop()
                loop_usb_connect.repeat = false;
                //                task_brake.terminate()
                //                startButton.checked = false;
            }
        }

        //        Rectangle {
        //            id: rectangle
        //            y: 209
        //            width: 154
        //            height: 68
        //            color: "#d33939"
        //            radius: 41.5
        //            anchors.left: parent.left
        //            anchors.bottom: parent.bottom
        //            anchors.bottomMargin: 683
        //            anchors.leftMargin: 70
        //            focus: false
        //            antialiasing: false
        //            visible: flase
        //            MouseArea {
        //                id: mouseArea
        //                anchors.fill: parent
        //            }
        //        }

        //        Rectangle {
        //            id: rectangle1
        //            x: 70
        //            width: 154
        //            height: 68
        //            color: "#00ff26"
        //            radius: 41.5
        //            anchors.top: rectangle.bottom
        //            anchors.topMargin: 19
        //            focus: false
        //            antialiasing: false
        //            visible: flase
        //            MouseArea {
        //                id: mouseArea1
        //                anchors.fill: parent
        //            }
        //        }

        Item{
            id:item_whell
            x: 528
            y: 138
            width: 384
            height: 384
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 438
            anchors.horizontalCenter: parent.horizontalCenter

            Image {
                id: dial_outside_ring_195_9
                x: 528
                y: 138
                width: 384
                height: 384
                rotation: wheel_engle
                anchors.fill: parent
                source: "qrc:/assets/wheel.png"
                fillMode: Image.PreserveAspectFit

                //                Image {
                //                    id: fuel_dial_195_43
                //                    anchors.verticalCenter: parent.verticalCenter
                //                    source: "qrc:/assets/fuel_dial_195_43.png"
                //                    anchors.horizontalCenter: parent.horizontalCenter
                //                    fillMode: Image.PreserveAspectFit
                //                }
            }
            Text {
                id: text2
                x: 665
                y: 265
                anchors.verticalCenter: dial_outside_ring_195_9.verticalCenter
                anchors.horizontalCenter: dial_outside_ring_195_9.horizontalCenter
                width: 109
                height: 49
                color: "#c1c1c1"
                text: wheel_engle.toFixed(1) + "°"
                font.pixelSize: 40
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                anchors.horizontalCenterOffset: 0
                anchors.verticalCenterOffset: -219
            }
        }

    }

    Slider {
        id: slider
        y: 845
        z:2
        width: 384
        height: 55
        anchors.bottom: parent.bottom
        wheelEnabled: true
        focusPolicy: Qt.StrongFocus
        orientation: Qt.Horizontal
        snapMode: RangeSlider.NoSnap
        stepSize: 1
        to: 100
        from: 0
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 60
        value: 50
    }

    Timeline {
        id: timeline
        animations: [
            TimelineAnimation {
                id: timelineAnimation
                //                onFinished: rectangle.state = ""
                duration: 1500
                loops: 1
                running: true
                to: 3000
                from: 0
            }
        ]
        endFrame: 3000
        enabled: true
        startFrame: 0
        KeyframeGroup {
            target: item_rpm
            property: "scale"

            Keyframe {
                value: 0.01
                frame: 0
            }

            Keyframe {
                value: 1
                frame: 1000
            }
        }

        KeyframeGroup {
            target: canvas_brake
            property: "ry"
            Keyframe {

                value: 0.01
                frame: 0
            }
            Keyframe {

                value: 0.01
                frame: 1000
            }
            Keyframe {
                value: 3.8
                frame: 2200
            }
            Keyframe {
                value: 0.01
                frame: 3000
            }
        }

        KeyframeGroup {
            target: canvas_rpm
            property: "rx"
            Keyframe {

                value: 0.01
                frame: 0
            }
            Keyframe {

                value: 0.01
                frame: 1000
            }
            Keyframe {
                value: 3.8
                frame: 2200
            }
            Keyframe {
                value: 0.01
                frame: 3000
            }
        }
        KeyframeGroup {
            target: label
            property: "textNumber"
            Keyframe {

                value: 0.01
                frame: 0
            }
            Keyframe {

                value: 0.01
                frame: 1000
            }
            Keyframe {
                value: 100
                frame: 2200
            }
            Keyframe {
                value: 0.01
                frame: 3000
            }
        }
        KeyframeGroup {
            target: label1
            property: "textNumber"
            Keyframe {

                value: 0.01
                frame: 0
            }
            Keyframe {

                value: 0.01
                frame: 1000
            }
            Keyframe {
                value: 100
                frame: 2200
            }
            Keyframe {
                value: 0.01
                frame: 3000
            }
        }
        KeyframeGroup {
            target: item_brake
            property: "scale"

            Keyframe {
                value: 0.01
                frame: 0
            }

            Keyframe {
                value: 1
                frame: 1000
            }
        }
        KeyframeGroup {
            target: item_whell
            property: "scale"

            Keyframe {
                value: 0.01
                frame: 0
            }

            Keyframe {
                value: 1
                frame: 1000
            }
        }
        KeyframeGroup {
            target: slider
            property: "opacity"

            Keyframe {
                value: 0.01
                frame: 0
            }

            Keyframe {
                value: 1
                frame: 1000
            }
        }
        KeyframeGroup {
            target: startButton
            property: "opacity"

            Keyframe {
                value: 0.01
                frame: 0
            }

            Keyframe {
                value: 1
                frame: 1000
            }
        }
        KeyframeGroup {
            target: roundButton1
            property: "opacity"

            Keyframe {
                value: 0.01
                frame: 0
            }

            Keyframe {
                value: 1
                frame: 1000
            }
        }
        KeyframeGroup {
            target: item2
            property: "rotation"

            Keyframe {
                value: 0
                frame: 0
            }
            Keyframe {
                value: 0
                frame: 1000
            }
            Keyframe {
                value: 210
                frame: 2200
            }
            Keyframe {
                value: 0
                frame: 3000
            }
        }
        KeyframeGroup {
            target: item3
            property: "rotation"

            Keyframe {
                value: 0
                frame: 0
            }
            Keyframe {
                value: 0
                frame: 1000
            }
            Keyframe {
                value: -210
                frame: 2200
            }

            Keyframe {
                value: 0
                frame: 3000
            }
        }


        KeyframeGroup {
            target: flipable
            property: "flipAngle"

            Keyframe {
                value: 180
                frame: 0
            }
            Keyframe {
                value: 180
                frame: 200
            }
            Keyframe {
                easing.bezierCurve: [0.90, 0.03, 0.69, 0.22, 1, 1]
                value: 1.1
                frame: 3000
            }
        }
        KeyframeGroup {
            target: flipable
            property: "opacity"
            Keyframe {
                value: 0
                frame: 0
            }

            Keyframe {
                easing.bezierCurve: [0.17, 0.84, 0.44, 1.00, 1, 1]
                value: 1
                frame: 1500
            }
        }
    }

    //    TransObj{
    //        id:transobj;
    //        onValueFromCpp: function(val) {
    //            console.log("value from cpp:" + val);
    //            rect.height = val;
    //        }
    //    }
    Timer{
        id:loop_usb_connect
        interval: 1000
        repeat: true
        running: false
        onTriggered: {
            if(startButton.state == "DISABLE"){
                if(loop_usb_connect.running != false){
                    task_brake.setFlag(1);
                    task_brake.start()
                }
            }else{
                loop_usb_connect.running = false
            }
        }
    }
    Connections{
        target:task_brake
        function onStarted() {
            console.log("线程启动")
        }
        function onDataChanged(data){
            //            var data = task_brake.getData();
            //            console.log("数据改变 ：" +  data["Rx"])
            var temp;
            if(axis_rx != data["Rx"] / 65535){
                axis_rx = data["Rx"] / 65535;
                canvas_rpm.rx = 3.7699 * axis_rx;
                item2.rotation = 216 * axis_rx - 2.3;
                label.text =  (axis_rx * 100).toFixed(2) + "%";
            }
            if(axis_ry != data["Ry"] / 65535){
                axis_ry = data["Ry"] / 65535;
                canvas_brake.ry = 3.7699 * axis_ry;
                item3.rotation = -216 * axis_ry + 2;
                label1.text = (axis_ry * 100).toFixed(2) + "%";

                setting_ped.children[9].children[0].axis_Rx.push(135 - 140 * axis_ry);
                temp = setting_ped.children[9].children[0].axis_Rx
                setting_ped.children[9].children[0].axis_Rx = temp
            }
            if(axis_throttle != data["Throttle"] / 65535){
                axis_throttle = data["Throttle"] / 65535;
            }
            if(axis_brake != data["Brake"] / 65535){
                axis_brake = data["Brake"] / 65535;
            }
            if(wheel_engle != degrees * data["Wheel"] / 65535){
                wheel_engle = degrees * data["Wheel"] / 65535;
                wheel_setting.children[12].children[0].axis_y.push(200 * data["Wheel"] / 65535 + 100);
                temp = wheel_setting.children[12].children[0].axis_y;
                wheel_setting.children[12].children[0].axis_y = temp;
            }
        }
        function onStartflag(flag){
            if(flag){
                startButton.state = "ENABLE";
            }else{
                startButton.state = "DISABLE";
                loop_usb_connect.start();
            }
        }

    }

    Component.onDestruction: task_brake.terminate();
}


